<template>
	<view class="customerService">
		<view class="service">
			<input class="txt" type="text" v-model="txt" placeholder="请输入客服" :disabled="xiugaidis" />
			<input class="tel" type="text" v-model="tel" placeholder="请输入电话" :disabled="xiugaidis" />

			<view :class="xiugai == 0 ? 'modify': 'xiugaiModify' ">
				<text v-if="xiugai == 0" @click="xiugais">修改</text>
				<text v-if="xiugai  == 1" @click="modifyService">完成</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getContact();
		},
		data() {
			return {
				txt: null,
				tel: null,
				xiugai: 0,
				xiugaidis: true,
			};
		},
		methods: {
			xiugais() {
				this.xiugai = 1;
				this.xiugaidis = false;
			},

			async modifyService() {
				let datas = {
					id: this.$store.state.userinfo.id,
					contact_name: this.txt,
					contact_phone: this.tel
				};
				let res = await this.$myrequest({
					url: `Service/editContact`,
					method: "POST",
					data: datas
				});
				console.log(res);
				if (res.data.code == 200) {
					uni.switchTab({
						url: "../profile1/profile1"
					})
					this.xiugai = 1;
				};
			},
			async getContact() {
				let id = this.$store.state.userinfo.id;
				let res = await this.$myrequest({
					url: `Service/getContact?id=${id}`,
				});
				console.log(res);
				this.txt = res.data.data.contact_name;
				this.tel = res.data.data.contact_phone;
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F8FA;
	}

	.service {
		width: 100%;
		height: 100%;
		background-color: #F5F8FA;
		margin-top: 418rpx;
	}

	input {
		display: inline-block;
		width: 100%;
		text-align: center;
		font-size: 30rpx;

		&:first-of-type {
			color: #000000;
		}

		&:last-of-type {
			margin-top: 45rpx;
			color: #808080;
		}
	}

	.modify {
		@include dibuanniu;
		width: 211rpx;
		bottom: 700rpx;

		>text {
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}

	.xiugaiModify {
		@include dibuanniu;
		width: 211rpx;
		bottom: 700rpx;
		background: none !important;
		box-shadow: none !important;
		border: 2rpx solid #33D4BE !important;

		>text {
			color: #33D4BE !important;
		}
	}
</style>
